<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.search"
        placeholder="全局搜索"
        style="width:200px;"
        size="mini"
        class="filter-item"
      ></el-input>
      <el-select
        v-model="listQuery.type"
        placeholder="类型"
        clearable
        style="width:90px;"
        size="mini"
        class="filter-item"
      >
        <el-option v-for="item in this.noticeType" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-select
        v-model="listQuery.status"
        placeholder="状态"
        clearable
        style="width:90px;"
        size="mini"
        class="filter-item"
      >
        <el-option v-for="item in this.articleStatus" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-button-group>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
          <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          size="mini"
          @click="handleReset"
        >重置</el-button>
        <router-link :to="'/gateway/create'">
          <el-button class="filter-item" type="primary" icon="el-icon-edit" size="mini">添加</el-button>
        </router-link>
      </el-button-group>
    </div>
    <el-table
      v-loading="loadingTableVisible"
      :element-loading-text="loadingTableTitle"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="list"
      border
      size="mini"
    >
      <el-table-column label="编号" prop="id" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="type" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="流量" prop="flow" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.flow }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="type" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ articleStatus[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="重要性" prop="importance" align="center" width="80">
        <template slot-scope="scope">
          <svg-icon
            v-for="n in +scope.row.importance"
            :key="n"
            icon-class="star"
            class="meta-item__icon"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="150px" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ scope.row.creationTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
    
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <router-link :to="'/gateway/edit/'+row.id">
            <el-button type="primary" class="list-mini-btn">编辑</el-button>
          </router-link>
          <el-button type="danger" class="list-mini-btn" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import waves from "@/directive/waves";
import { getEnum } from "@/utils/global";
import { getNoticeList, deleteNoticeInfo } from "@/api/gateway/notice";
export default {
  directives: { waves },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 20,
        search: ""
      },
      list: [],
      total: 0,
      noticeType: null,
      articleStatus: null,
      loadingTableVisible: false,
      loadingTableTitle: "拼命加载中"
    };
  },
  created() {
    this.noticeType = getEnum("saaS.Entity.Enums.NoticeType");
    this.articleStatus = getEnum("saaS.Entity.Enums.ArticleStatus");
    this.getNotices();
  },
  methods: {
    getNotices() {
      this.loadingTableVisible = true;
      getNoticeList(this.listQuery)
        .then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.loadingTableVisible = false;
        })
        .catch(() => {
          this.loadingTableVisible = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getNotices();
    }
  }
};
</script>